<template>
<!-- 博士后产业园区总览，替换首页原先的cesium地图  -->
    <div style="width: 100%; height: 100%">
        <div id="container" ref="container">
        </div>
    </div>
</template>

<script>
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader'
import { ColladaLoader } from 'three/examples/jsm/loaders/ColladaLoader'
import Stats from 'stats.js/build/stats.min.js'
import { Loader, log } from 'three'

// 定义three全局变量
const scene = new THREE.Scene;
// three的控制器必须放在data外，否则会造成卡顿
let controls;
// 帧率显示插件
let stats;

export default {
    data() {
        return{
            // threejs初始化的参数
            camera: null,
            renderer: null,
            tick: null,
        }
    },
    created() {
        // 监听鼠标点击
        window.addEventListener("dblclick", this.onMouseDblclick, true) 
    },
    destroyed() {
        // 离开当前页面的时候，销毁相关的鼠标监听事件
        window.removeEventListener("dblclick", this.onMouseDblclick, true)
    },
    mounted() {
        this.init();
        this.animate();
        this.addModels();
        this.addDocter();
    },
    methods: {
        // 界面初始化
        init() {
            // 场景对象
            this.scene = new THREE.Scene()
            // 相机
            let container = this.$refs.container
            this.camera = new THREE.PerspectiveCamera(
                70,
                container.clientWidth / container.clientHeight,
                0.01,
                10000
            )
            this.camera.position.set(100, 80, -50)
            // 添加环境光
            this.scene.add(new THREE.AmbientLight(0xffffff, 0.6))
            // this.scene.add(new THREE.HemisphereLight(0xffffff, 0xffffff, 0.8))
            // 创建渲染器对象
            this.renderer = new THREE.WebGLRenderer({
                antialias: true,
                alpha: true,
                powerPreference: "high-performance"
            })
            this.renderer.setSize(container.clientWidth, container.clientHeight)
            container.appendChild(this.renderer.domElement)
            // 控制
            this.controls = new OrbitControls(this.camera, this.renderer.domElement)
            // 坐标轴辅助工具
            // let helper = new THREE.AxesHelper(50)
            // this.scene.add(helper)
             // 显示帧率
            this.stats = new Stats()
            container.appendChild(this.stats.dom)
            // 启用浏览器调试插件
            window.scene = this.scene;
            window.THREE = THREE;
        },
        animate() {
            this.stats.update();
            this.tick = requestAnimationFrame(this.animate)
            this.renderer.render(this.scene, this.camera)
        },
        addModels() {
            let loader = new ColladaLoader()
            loader.load('models/Three/zone2/博士后.dae', obj =>{
                // obj.position.set(20, 0, -5)
                obj.scene.scale.set(2.5, 2.5, 2.5)
                this.scene.add(obj.scene) 
            },xhr => {
                console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' )
            })
        },
        addDocter() {
            let loader = new GLTFLoader()
            loader.load('models/Three/doctor_building.gltf', obj =>{
                obj.scene.name = '博士后产业园'
                obj.scene.scale.set(0.275, 0.35, 0.275)
                obj.scene.position.set(-55, 0, 27)
                obj.scene.rotation.set(0, 1.5, 0)
                this.scene.add(obj.scene)
            },xhr => {
                console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' )
            })
        },
        // 射线检测获取与射线相交的对象数组
        getIntersects(event) {
            // 声明 raycaster 和 mouse 变量
            let raycaster = new THREE.Raycaster()
            let mouse = new THREE.Vector2()
            mouse.x = (event.clientX / this.$refs.container.clientWidth) * 2 - 1
            mouse.y = -(event.clientY / (this.$refs.container.clientHeight + 240)) * 2 + 1
            // 通过鼠标点击的位置(二维坐标)和当前相机的矩阵计算出射线位置
            raycaster.setFromCamera(mouse, this.camera)
            // 获取与射线相交的对象数组，其中的元素按照距离排序，越近的越靠前
            let intersects = raycaster.intersectObjects(this.scene.children, true)
            console.log(intersects);
            //返回选中的对象
            return intersects
        },
        // 鼠标双击建筑物，跳转到单栋楼宇模型界面
        onMouseDblclick(event) {
            // 调用射线检测，获得鼠标点击位置的模型实体
            let intersects = this.getIntersects(event)
            // 判断鼠标点击的位置是否为博士后产业园这栋楼
            if ( intersects.length != 0 && intersects[0].object.parent.name.indexOf("博士后") != -1){
                // 点击之后跳转到单栋建筑物的界面
                this.clearCache()
                this.$router.push('/building')   
            }
            else return
        },
        // 销毁场景释放缓存
        clearCache() {
            this.renderer.dispose()
            this.renderer.forceContextLoss()
            window.cancelAnimationFrame(this.tick)
            // this.renderer.context = null
            this.renderer.domElement = null
            this.renderer = null
            this.scene = null
            this.camera = null
            this.controls = null
        },
    }
}
</script>

<style lang="less" scoped>
#container {
    width: 100%;
    height: 100%;
}
</style>

